import React, { PureComponent } from 'react'
import styles from './Home.css'
import {Anchor, Menu, Button} from "antd";

const { Link } = Anchor

const SubMenu = Menu.SubMenu
const MenuGroup = Menu.ItemGroup;

const logoImg = require('../assets/logo.png')

export default class extends  PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      fixed: false
    }
  }
  componentDidMount() {
    window.onscroll = (e) => {
      let ex = e || window.event;
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if(scrollTop > 52) {
        if(this.state.fixed == false) {
          this.setState({
            fixed: true
          })
        }
      } else {
        this.setState({
          fixed: false
        })
      }
    }
  }

  scrollToAnchor = (anchorName) => {
    if (anchorName) {
      let anchorElement = document.getElementById(anchorName);
      if(anchorElement) { anchorElement.scrollIntoView(); }
    }
  }
  render() {
    return (
      <div id="toper" className={this.state.fixed ? styles.tcTopFixed : styles.tcTop}>
        <div className={styles.tcTopImg}><img src={logoImg} width="234px" height="52px"/></div>
        <Menu defaultSelectedKeys={['1']} style={{border: 0}} className={styles.tcTopMenu} mode="horizontal">
          <Menu.Item key="1" className={styles.tcTopMenuItem}><a style={{color: 'white'}} onClick={() => {this.scrollToAnchor('#')}}>首页</a></Menu.Item>
          <Menu.Item className={styles.tcTopMenuItem}><a style={{color: 'white'}} onClick={() => {this.scrollToAnchor('special')}}>特性</a></Menu.Item>
          <Menu.Item className={styles.tcTopMenuItem}><a style={{color: 'white'}} onClick={() => {this.scrollToAnchor('luxian')}}>路线图</a></Menu.Item>
          <Menu.Item className={styles.tcTopMenuItem}><a style={{color: 'white'}} onClick={() => {this.scrollToAnchor('zixun')}}>咨询</a></Menu.Item>
          <Menu.Item className={styles.tcTopMenuItem}><a style={{color: 'white'}} onClick={() => {this.scrollToAnchor('hezuo')}}>合作伙伴</a></Menu.Item>
        </Menu>
        <div className={styles.tcTopBtn}><Button>加入telegram</Button></div>
      </div>
    )
  }
}
